<%@page pageEncoding="UTF-8" isELIgnored="false" session="true"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>
<%@ page language="java" contentType="text/html;charset=Windows-31J" errorPage="/kadai/login/index.jsp"%>
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>なんでもランキング!!</title>
<script type="text/javascript" src="/static/js/jCanvaScript.1.5.18.min.js">
</script>
<script type="text/javascript">
	//表示
	function start_1(idCanvas) {
		//選択された質問によって代入する表示値を変える
		if(F1.change.options.selectedIndex==1){
			valueA = document.F1.value1.value;
			valueB = document.F1.value2.value;
			valueC = document.F1.value3.value;
		}else if(F1.change.options.selectedIndex==2){
			valueA = document.F1.value21.value;
			valueB = document.F1.value22.value;
			valueC = document.F1.value23.value;
		}else if(F1.change.options.selectedIndex==3){
			valueA = document.F1.value31.value;
			valueB = document.F1.value32.value;
			valueC = document.F1.value33.value;
		}
		//値が不正にならない様にする
		if (Number(valueA) <= 0) {
			valueA = 0;
		}
		if (Number(valueB) <= 0) {
			valueB = 0;
		}
		if (Number(valueC) <= 0) {
			valueC = 0;
		}
		var xx;
		var yy;
		var zz;
		var zentai;
		//入力が二回目の時一回目のテキストを消す
		jc('#myText_1').del();
		jc('#myText_2').del();
		jc('#myText_3').del();
		//パーセント表示
		zentai = Number(valueA) + Number(valueB) + Number(valueC);
		//0割りを防ぐ
		if (zentai == 0) {
			xx = Number(valueA);
			yy = Number(valueB);
			zz = Number(valueC);
		} else {
			xx = Number(valueA) / zentai;
			yy = Number(valueB) / zentai;
			zz = Number(valueC) / zentai;
		}
		//入力された値の棒グラフを表示
		jc('#myRect_1').transform(1, 0, 0, xx, 0, 220 - 220 * xx, true)
				.opacity(1);
		jc('#myRect_2').transform(1, 0, 0, yy, 0, 220 - 220 * yy, true)
				.opacity(1);
		jc('#myRect_3').transform(1, 0, 0, zz, 0, 220 - 220 * zz, true)
				.opacity(1);
		//棒グラフの値の表示
		jc.text(valueA + "票(" + Math.round(xx * 100) + "%)", 170,
				218 - 135 * xx).id('myText_1');
		jc.text(valueB + "票(" + Math.round(yy * 100) + "%)", 235,
				218 - 135 * yy).id('myText_2');
		jc.text(valueC + "票(" + Math.round(zz * 100) + "%)", 305,
				218 - 135 * zz).id('myText_3');
		jc.text("総投票数：" + zentai + "票", 312, 68).id('myText_4');
	}
	//表示用
	function onload_1(idCanvas) {
		//選択された質問にプルダウンの表示項目を合わせる
		var cha;
		cha = ${(change)};
		if(Number(cha) > 0){
		document.F1.change.options[cha].selected= true;
		}
		jc.start(idCanvas, true);
		//表用
		jc.rect(100, 50, 300, 200,'#ffffff',true);
		jc.rect(100, 50, 300, 200);
		jc.line([ [ 140, 221 ], [ 390, 221 ] ]);
		jc.line([ [ 140, 70 ], [ 140, 221 ] ]);
		jc.text("0", 130, 221);
		jc.text("50", 125, 155);
		jc.text("100", 120, 90);
		jc.text("(%)", 120, 70);
		//選択された質問に表示内容を変える
		if(F1.change.options.selectedIndex==1){
			jc.text("犬", 185, 240);
			jc.text("猫", 255, 240);
			jc.text("鳥", 325, 240);
		}else if(F1.change.options.selectedIndex==2){
			jc.text("カレー", 178, 240);
			jc.text("ラーメン", 243, 240);
			jc.text("お寿司", 315, 240);
		}else if(F1.change.options.selectedIndex==3){
			jc.text("ドラクエ", 173, 240);
			jc.text("FF", 253, 240);
			jc.text("ポケモン", 312, 240);
		}
		//棒グラフ用
		jc.rect(165, 85, 50, 135, '#ffff00', 1).id('myRect_1').opacity(0);
		jc.rect(235, 85, 50, 135, '#00cc66', 1).id('myRect_2').opacity(0);
		jc.rect(305, 85, 50, 135, '#ff0000', 1).id('myRect_3').opacity(0);
		start_1('canvas_1');
	}

</script>
</head>
<body onload="onload_1('canvas_1')"bgcolor="${f:h(bgcolor)}">
<center>

<!-- ロゴ -->
<table border="0">
<tr><td align=center>
<font size="1" face="ＭＳ 明朝" color="#bfbfbf">
<B><I>な</FONT>
<font size="0.8" face="ＭＳ 明朝" color="#7f7f7f">
<sup>ん</sup></FONT>
<font size="0.6" face="ＭＳ 明朝" color="#4a4a4a">
<sup>で</sup></sup></FONT>
<font size="0.5" face="ＭＳ 明朝" color="#353535">
<sup>も</sup></FONT>
<font size="0.6" face="ＭＳ 明朝" color="#000000">
<sup>★</sup></FONT>
<font size="0.5" face="ＭＳ 明朝" color="#353535">
<sup>ラ</sup></FONT>
<font size="0.6" face="ＭＳ 明朝" color="#4a4a4a">
<sup>ン</sup></FONT>
<font size="0.7" face="ＭＳ 明朝" color="#7f7f7f">
<sup>キ</sup></FONT>
<font size="0.7" face="ＭＳ 明朝" color="#bfbfbf">
<sup>ン</sup></I></FONT>
<font size="1" face="ＭＳ 明朝" color="#7f7f7f">
グ</B></FONT>
	</td></tr>
	<tr><td>
<Table border="0" bgcolor="#000000" cellpadding="15" Cellspacing="0" width="25" height="1"
style="border:thick ridge #c9c9c9;font-family:ＭＳ ゴシック;font-size:10px;color:#ffffff;"><Tr><Td align="center">
<marquee width="120" scrollamount="5" truespeed>
さまざまなジャンルを、みんなで人気投票ができるサイトです。
</marquee></Td></Tr></Table>
</td></tr></table>

<hr style="border:dotted;color:#ff80c0;">
<Table border="0" bgcolor="#ffffff" cellpadding="15" Cellspacing="0" width="365" height="80"
style="border:thick double #ff6600;font-family:ＭＳ 明朝;font-size:32px;color:#ff6600;"><Tr><Td align="center">
投票結果発表！！！
</Td></Tr></Table>

<h3>投票結果を見たい質問を選んでください</h3>
<form name="F1" action="" method="post">
<select size="1" name="change" id="change" onChange="F1.submit();">
			<!--初期表示用とそれ以降の表示-->
			<c:choose>
			<c:when test="${(change)>=1}">
			<option value="0" disabled>-------------------選択-------------------</option>
			</c:when>
			<c:otherwise>
			<option value="0">-------------------選択-------------------</option>
			</c:otherwise>
			</c:choose>
<option value="1">ペットにしたい動物はどれですか？</option>
<option value="2">好きな食べ物はどれですか？</option>
<option value="3">好きなゲームはどれですか？</option>
</select>
<input type="hidden"  name="value1" value="${f:h(resultCount1)}"/>
<input type="hidden"  name="value2" value="${f:h(resultCount2)}"/>
<input type="hidden"  name="value3" value="${f:h(resultCount3)}"/>
<input type="hidden"  name="value21" value="${f:h(resultCount21)}"/>
<input type="hidden"  name="value22" value="${f:h(resultCount22)}"/>
<input type="hidden"  name="value23" value="${f:h(resultCount23)}"/>
<input type="hidden"  name="value31" value="${f:h(resultCount31)}"/>
<input type="hidden"  name="value32" value="${f:h(resultCount32)}"/>
<input type="hidden"  name="value33" value="${f:h(resultCount33)}"/>
</form>


<!-- 結果グラフの表示 -->
	<table border="0">
		<tr>
			<th valign="top">
				<canvas id="canvas_1" width="506px" height="300px"></canvas>
			</th>
			</tr>
			<tr>
			<c:choose>
			<c:when test="${(change)==1}">
			<c:if test="${resultCount1 + resultCount2 + resultCount3 > 0 }" >
			<th valign="top">
				<table border="1" bgcolor="#ffffff">
					<tr>
					<c:if test="${resultCount1 > 0 }" >
						<th>
							<h3>犬をペットにしたい理由</h3>
						</th>
						</c:if>
						<c:if test="${resultCount2 > 0 }" >
						<th>
							<h3>猫をペットにしたい理由</h3>
						</th>
						</c:if>
						<c:if test="${resultCount3 > 0 }" >
						<th>
							<h3>鳥をペットにしたい理由</h3>
						</th>
						</c:if>
					</tr>
					<tr>
					<c:if test="${resultCount1 > 0 }" >
						<th valign="top" align="left"><c:forEach var="dog" items="${resultList1}">
						${f:h("・")}
						${f:h(dog)}
						<br>
						</c:forEach></th>
						</c:if>
						<c:if test="${resultCount2 > 0 }" >
						<th valign="top" align="left"><c:forEach var="cat" items="${resultList2}">
						${f:h("・")}
						${f:h(cat)}
						<br>
							</c:forEach></th>
							</c:if>
							<c:if test="${resultCount3 > 0 }" >
						<th valign="top" align="left"><c:forEach var="bird" items="${resultList3}">
						${f:h("・")}
						${f:h(bird)}
						<br>
						</c:forEach></th>
						</c:if>
					</tr>
				</table>
			</th>
			</c:if>
			</c:when>
			<c:when test="${(change)==2}">
			<c:if test="${resultCount21 + resultCount22 + resultCount23 > 0 }" >
			<th valign="top">
				<table border="1"bgcolor="#ffffff">
					<tr>
					<c:if test="${resultCount21 > 0 }" >
						<th>
							<h3>カレーが好きな理由</h3>
						</th>
						</c:if>
						<c:if test="${resultCount22 > 0 }" >
						<th>
							<h3>ラーメンが好きな理由</h3>
						</th>
						</c:if>
						<c:if test="${resultCount23 > 0 }" >
						<th>
							<h3>お寿司が好きな理由</h3>
						</th>
						</c:if>
					</tr>
					<tr>
					<c:if test="${resultCount21 > 0 }" >
						<th valign="top" align="left"><c:forEach var="curry" items="${resultList21}">
						${f:h("・")}
						${f:h(curry)}
						<br>
						</c:forEach></th>
						</c:if>
						<c:if test="${resultCount22 > 0 }" >
						<th valign="top" align="left"><c:forEach var="ramen" items="${resultList22}">
						${f:h("・")}
						${f:h(ramen)}
						<br>
							</c:forEach></th>
							</c:if>
							<c:if test="${resultCount23 > 0 }" >
						<th valign="top" align="left"><c:forEach var="sushi" items="${resultList23}">
						${f:h("・")}
						${f:h(sushi)}
						<br>
						</c:forEach></th>
						</c:if>
					</tr>
				</table>
			</th>
			</c:if>
			</c:when>
			<c:when test="${(change)==3}">
			<c:if test="${resultCount31 + resultCount32 + resultCount33 > 0 }" >
			<th valign="top">
				<table border="1"bgcolor="#ffffff">
					<tr>
					<c:if test="${resultCount31 > 0 }" >
						<th>
							<h3>ドラクエが好きな理由</h3>
						</th>
						</c:if>
						<c:if test="${resultCount32 > 0 }" >
						<th>
							<h3>FFが好きな理由</h3>
						</th>
						</c:if>
						<c:if test="${resultCount33 > 0 }" >
						<th>
							<h3>ポケモンが好きな理由</h3>
						</th>
						</c:if>
					</tr>
					<tr>
					<c:if test="${resultCount31 > 0 }" >
						<th valign="top" align="left"><c:forEach var="draque" items="${resultList31}">
						${f:h("・")}
						${f:h(draque)}
						<br>
						</c:forEach></th>
						</c:if>
						<c:if test="${resultCount32 > 0 }" >
						<th valign="top"  align="left"><c:forEach var="FF" items="${resultList32}">
						${f:h("・")}
						${f:h(FF)}
						<br>
							</c:forEach></th>
							</c:if>
							<c:if test="${resultCount33 > 0 }" >
						<th valign="top" align="left"><c:forEach var="pokemon" items="${resultList33}">
						${f:h("・")}
						${f:h(pokemon)}
						<br>
						</c:forEach></th>
						</c:if>
					</tr>
				</table>
			</th>
			</c:if>
			</c:when>
			</c:choose>
		</tr>
	</table>
	</center>
	<form name= "form3" method= "post" action= "/kadai/login/">
<a href="${f:url('/kadai/screenVoting/')}">再投票</a>
<input type="hidden" name="logout" value="ログアウトしました">
<a href="javascript:form3.submit()">ログアウト</a>
</form>
</body>
</html>